<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>费用中心 - 算力使用</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
    .s-tit {
      padding: 30px 30px;
    }
    .h-tit {
      padding: 30px 0;
      font-size: 16px;
      color: #333;
    }
    .data-m {
      padding: 0 30px;
      position: relative;
      padding-bottom: 30px;
    }
    .foz .ivu-form-item-content {
      color: #666;
      font-size: 14px;
    }
    
    .query-head {
      display: flex;
    }
    .date-pick-fix {
      width: 285px;
      height: 30px;
      line-height: 27px;
      display: flex;
      border-radius: 3px;
      border: 1px solid #eee;
      overflow: hidden;
      margin-right: 30px;
    }
    .date-pick-fix li {
      flex: 1;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 3px;
      cursor: pointer;
    }
    .date-pick-fix li:nth-child(odd) {
      background: #f3f4f4;
    }
    .date-pick-fix li.on {
      background: #0e9cf2;
      color: #fff;
    }
    .f-query {
      flex: 1;
      margin-bottom: 1px;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="costCoreUse">
    <div class="main">
      <section class="panel data-m">
        <h1 class="h-tit">算力使用</h1>
        <div class="query-head">
          <ul class="date-pick-fix">
            <li :class="{on : dateActive === index}" @click="choseTabDate(index)" v-for="(item, index) of dateChose" :key="index">{{item}}</li>
          </ul>
          <i-form class="f-query" :model="query" label-position="right" ref="query" inline @keyup.enter.native="queryList">
  
            <form-item class="w280" label="日期查询 : " prop="tis">
              <date-picker class="w200" type="daterange" placement="bottom-center" placeholder="请选择日期查询" @on-change="setDateRange" v-model="query.cTime"></date-picker>
            </form-item>
            <form-item>
              <i-button type="primary" class="sb-btn" @click="clickQuery">查询</i-button>
              <!-- <i-button type="reset" class="reset-btn" @click="formReset('query')">重置</i-button> -->
            </form-item>
            <form-item class="foz">算力使用 : {{G.toThousands(G.roundFixed(useHash))}} TH</form-item>
          </i-form>
        </div>
        
        <i-table class="mb10" :class="{loading: tbLoading}" :columns="columns1" :data="list" size="small" border no-data-text="没有相关数据"></i-table>
        
        <div class="page-w" v-if="list.length">
          <Page :total="sizeCount" :page-size="pageSize" :current="currentPage" @on-change="changePage" show-total show-elevator />
        </div>
                
      </section>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        tbLoading: true,
        currentPage: 1,
        pageSize: 10,
        totalNumber: 0,
        dateActive: 0,
        totalHash: 0,
        dateType: -1,
        
        useHash: 0,
        query: {
          StartDate: '',
          EndDate: '',
            cTime: [],
        },
        dateChose: ['全部', '本月', '上月', '最近3月'],       
        columns1: [
          {
            title: '创建时间',
            key: 'createTime',
            width: 180,
            align: 'center',
            render(h, params) {
              var text = G.getFormatTime(params.row.createTime - 0).slice(0, -3)
              return h('div', text)
            }
          },
          {
            title: '使用类型',
            key: 'hashTypez',
            width: 210,
            align: 'center',
          },
          {
            title: '编号',
            key: 'trainingCode',
            width: 210,
            align: 'center',
          },
          {
            title: '训练时间',
            key: 'overTime',
            width: 180,
            align: 'center',
            render(h, params) {
                var text = G.getFormatTime(params.row.overTime - 0).slice(0, -3)
                return h('div', text)
            }
          },
          {
            title: '训练时长',
            key: 'useTaskM',
            width: 150,
            align: 'center',
          },
          {
            title: '使用算力(TH)',
            key: 'payTh',
            minWidth: 150,
            align: 'center',
          },
        ],
        list: [
          // {
          //   time: '2018-11-22 11:49:01',
          //   dname: 'AI训练',
          //   tys: 'TS100000000000000',
          //   overTime: '2018-11-28 09:55:20',
          //   useTaskM: '1天3小时53分',
          //   spz: '10000TH',
          // },
        ]
      },
      methods: {
        init() {
          this.requestList(),
          this.findOrderThSUM()
        },
        
        clickQuery() {
          this.currentPage = 1
          this.dateType = -1
          this.dateActive = 0
          this.queryList()
        },
        
        // 查询(带参数请求list)
        queryList() {
          this.requestList(this.query)
        },
        
        setDateRange(arr) {
          this.query.StartDate = arr[0]
          this.query.EndDate = arr[1]
        },
        
        findOrderThSUM() {
          var realUrl = '/user/findPayThSUM';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          // 立即提交
          axios.post(url).then(res => {
              if (res.data.code == 1) {
               this.useHash = res.data.data
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        
        // 查询数据
        requestList(query) {
          query = query || this.query
          this.tbLoading = true
          var realUrl = '/user/ThUse';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          var ydata = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            last: this.dateType,
          }
          var zdata = Object.assign(query, ydata);
          var data = G.paramsSerializer(zdata)

          // 立即提交
          axios.post(url, data).then(res => {
              if (res.data.code == 1) {
                this.tbLoading = false
                // this.totalNumber = res.data.totalNumber;
                this.sizeCount = res.data.data.pageCount
                this.list = res.data.data.listModel;

                var typez = {
                  hashTypez: 'AI训练'
                }
                this.list.forEach((v, i, arr) => {
                  arr[i] = Object.assign(v, typez);
                })
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        
        // 选择日期查询
        choseTabDate(index) {
          var arr = [-1, 0, 1, 2];
          this.dateActive = index
          this.dateType = arr[index]
          this.query.cTime = []
          this.query.StartDate = ''
          this.query.EndDate = ''
          this.currentPage = 1
          this.requestList()
        },
        
        // 重置表单
        formReset(name) {
          this.$refs[name].resetFields()
        },
        
        // 分页
        changePage(page) {
          this.currentPage = page
          this.requestList()
        },
      },
      computed: {
        
      },
      mounted() {
        this.init()
      }
    })
  </script>
</body>

</html>